<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 表单
                </el-breadcrumb-item>
                <el-breadcrumb-item>商品OCR识别</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row><el-col :span="24">
            <el-steps :active="activeStep" finish-status="success" simple style="margin-top: 20px">
                <el-step title="选择读取图片"></el-step>
                <el-step title="图片内容清洗"></el-step>
                <el-step title="上传识别数据"></el-step>
            </el-steps></el-col>
            </el-row>
            <el-row style="margin-top:15px">
            <el-tabs type="border-card" :tab-position="tabPosition" style="width:100%;" v-model="activeTabName" @tab-click="func_tab_handleClick" >
            <el-tab-pane label="图片预处理" name="first" style="width:98%;height:700px;overflow-y:auto;overflow-x:hidden">
                <div class="form-box">
                    <el-form ref="ocrProductFormRef" :rules="rules" :model="ocrProductForm" :label-width="formLabelWidth">
                        <!-- <el-form-item label="选择读取图片" prop="filepath" >
                            <el-input v-model="ocrProductForm.filepath" ></el-input>
                            <el-button icon="el-icon-document-copy" type="primary" size="small" style="margin-left: 15px" @click="checkFile">选择文件</el-button>
                            <input type="file" id="fileinput" style="display:none;" @change="checkFileSure" />
                        </el-form-item>
                        <el-form-item label="设置图片编辑目录" prop="folderpath">
                            <el-input v-model="ocrProductForm.folderpath" ></el-input>
                        </el-form-item> -->
                        <el-form-item>
                            <el-button type="primary" @click="func_choose_handle_click">设定文件目录</el-button>
                            <el-button type="primary" @click="func_cut_handle_click">读取原图处理</el-button>
                            <el-button @click="onReset">重置表单</el-button>
                            <el-button class="button" @click="func_next_handle_click(2)" type="text">下一步</el-button>
                        </el-form-item>
                        <el-form-item label="图片编辑目录" prop="folderpath">
                            <el-input v-model="ocrProductForm.folderpath" readonly />
                        </el-form-item>
                        <el-form-item label="读取图片" prop="filepath">
                            <el-input v-model="ocrProductForm.filepath" readonly />
                        </el-form-item>
                        <el-form-item label="编辑图片" prop="verifyPic">
                            <el-input v-model="ocrProductForm.verifyPic" />
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="识别内容清洗" name="second" style="width:98%;height:700px;overflow-y:hidden;overflow-x:hidden">
                <el-row><el-col :span="24">
                <div class="form-box" style="width:100%">
                <el-form ref="ocrProductFormRef" :rules="rules" :model="ocrProductForm" :label-width="formLabelWidth">
                    <el-form-item>
                    <el-button class="button" @click="func_next_handle_click(1)" type="text">上一步</el-button>
                    <el-button type="primary" @click="func_ocr_handle_click">图片识别</el-button>
                    <el-button type="primary" @click="func_split_handle_click">识别内容分割</el-button>
                    <el-button class="button" @click="func_next_handle_click(3)" type="text">下一步</el-button>
                    </el-form-item>
                    <el-row><el-col :span=12>
                        <el-form-item label="预处理图片" prop="verifyPic">
                            <el-input v-model="ocrProductForm.verifyPic"></el-input>
                            <el-button icon="el-icon-document-copy" type="primary" size="small" style="margin-left: 15px" @click="checkVerifyFile">选择文件</el-button>
                        </el-form-item>
                        <el-form-item label="数据切割" prop="splitStr">
                            <el-input v-model="ocrProductForm.splitStr" />
                        </el-form-item>
                    </el-col>
                    <el-col :span=12>
                        <el-form-item label="原始数据" prop="dirtyContent" :loading="searchVerifyLoading">
                            <el-input type="textarea" rows="7" v-model="ocrProductForm.dirtyContent"></el-input>
                        </el-form-item>
                    </el-col></el-row>
                </el-form>
                </div>
                </el-col></el-row>
                <el-row><el-col :span="6">
                    <div style="height:450px;overflow-y:auto;overflow-x:hidden">
                        <el-image :src="imgUrl" />
                    </div>
                </el-col><el-col :span="18">
                <div style="height:450px;overflow-y:hidden;overflow-x:hidden">
                <el-table :data="tableData" border class="table" ref="multipleTableRef" header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange" style="width:100%" height="420">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="ocr" style="width:20%">
                        <template #default="scope">
                            {{ scope.row.ocrData }}
                            <el-input type="textarea" rows=3 v-model="scope.row.ocrData" />
                        </template>
                    </el-table-column>
                    <el-table-column label="ocr识别数据" style="width:30%">
                        <template #default="scope">
                            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">品牌 </span>
                            <!-- <el-input v-model="scope.row.board" /> -->
                            <el-select v-model="scope.row.board" class="m-2" 
                            filterable
                            allow-create
                            default-first-option
                            placeholder="品牌" size="small">
                                <el-option v-for="item in boardOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                             </el-select>
                            <br/><span class="ml-3 w-35 text-gray-600 inline-flex items-center">识别词 </span>
                            <el-input v-model="scope.row.key" />
                            <br/><span class="ml-3 w-35 text-gray-600 inline-flex items-center">单位 </span>
                            <el-input v-model="scope.row.unit" />
                            <br/><span class="ml-3 w-35 text-gray-600 inline-flex items-center">价格 </span>
                            <el-input v-model="scope.row.money" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180" align="center">
                        <template #default="scope">
                            <el-button type="text" icon="el-icon-delete" class="red" 
                             @click="func_handleDelete(scope.$index, scope.row)">删除</el-button>
                            <el-button type="text" icon="el-icon-delete" class="red" 
                             @click="func_handleInsert(scope.$index, scope.row)">插入一行</el-button>
                        </template>
                    </el-table-column>
                </el-table></div></el-col></el-row>
            </el-tab-pane>
            <el-tab-pane label="上传识别数据" name="third" style="width:98%;height:700px;overflow-y:auto;overflow-x:hidden">
                <div class="form-box">
                    <el-form ref="ocrProductFormRef" :rules="rules" :model="ocrProductForm" :label-width="formLabelWidth">
                        <el-form-item>
                            <el-button class="button" @click="func_next_handle_click(2)" type="text">上一步</el-button>
                            <el-button type="primary" @click="func_submit_handle_click">图片识别</el-button>
                            <el-button @click="onReset">重置表单</el-button>
                        </el-form-item>
                        <el-form-item label="预处理图片" prop="verifyPic">
                            <el-input v-model="ocrProductForm.verifyPic" readonly />
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            </el-tabs></el-row>
        </div>
    </div>
</template>
<script>
import { reactive, ref, toRefs, onMounted} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { chooseOcrPicPath, chooseOcrVerifyPicPath, cutOcrPicData, verifyPicData } from "../../api/productocr.js";
import {BRAND_STRING } from "../../api/productocr.js";
import imgUrl from '../../include/12-30/edithangzhoumeituan_20211230192238.jpg'
export default {
    name: "ocrProductForm",
    setup() {
        let tabPosition = ref("top");
        const searchVerifyLoading = ref(false);
        const activeStep = ref(1);
        const activeTabName = ref("first");
        const formLabelWidth = ref("170px");
        const tableData = ref([]);
        const editTable = ref([]);
        const editTableData = {
            board: "",
            unit: "",
            money: "",
            key: "",
        }
        const boardOptions = ref([]);
        const multipleSelection = ref([]);
        const rules = {
            filepath: [
                { required: true, message: "请选择文件", trigger: "blur" },
            ],
            folderpath: [
                { required: true, message: "请输入图片编辑目录", trigger: "blur" },
            ],
        };
        const ocrProductFormRef = ref(null);
        const ocrProductForm = reactive({
            filename: "",
            filepath: "",
            folderpath: "",
            verifyPic: "",
            dirtyContent: "",
            splitStr: '加入购物车'
        });
        const cutPicQuery = reactive({
            filepath: "",
            folderpath: "",
        });
        const init = () =>{
            let productBoard = [];
            for (let index = 0; index < BRAND_STRING.length; index++) {
                productBoard.push({
                    value: BRAND_STRING[index],
                    label: BRAND_STRING[index],
                });
            }
            boardOptions.value = productBoard;
        };
        init();

        // In自定义方法
        const checkFile = () =>{
            document.querySelector('#fileinput').click()
        };
        const checkVerifyFile = () =>{
            chooseOcrVerifyPicPath().then((res) => {
                ocrProductForm.verifyPic = res.data.verifyfilepath;
            }).catch(() => {});
        }
        const checkFileSure = () =>{
            ocrProductForm.filepath = document.querySelector('#fileinput').files[0].name
        };
        const func_tab_handleClick = (tab, event)=> {
            console.log(tab, event)
        };
        const func_next_handle_click = (obj) => {
            switch (obj) {
                case 1:
                    activeTabName.value = "first";
                    activeStep.value = 1;
                    break;
                case 2:
                    activeTabName.value = "second";
                    activeStep.value = 2;
                    break;
                case 3:
                    activeTabName.value = "third";
                    activeStep.value = 3;
                    break;
                default:
                    break;
            }
        }
        const func_choose_handle_click =() =>{
            chooseOcrPicPath().then((res) => {
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    ElMessage.success("提交成功！");
                    ocrProductForm.folderpath = res.data.folderpath
                    ocrProductForm.filepath = res.data.filepath
                }
            }).catch(() => {});
        }
        // 图片切割
        const func_cut_handle_click = () => {
            // 表单校验
            ocrProductFormRef.value.validate((valid) => {
                if (valid) {
                    cutPicQuery.folderpath = ocrProductForm.folderpath
                    cutPicQuery.filepath = ocrProductForm.filepath
                    cutOcrPicData(cutPicQuery).then((res) => {
                        if(res.code != 200) {
                            if(res.type == 0) {
                                ElMessage.warning(res.msg);
                            } else {
                                ElMessage.error(res.msg);
                            }
                        } else {
                            ElMessage.success("提交成功！");
                            ocrProductForm.folderpath = res.data.folderpath
                            ocrProductForm.filepath = res.data.filepath
                            ocrProductForm.verifyPic = res.data.verifyPic
                        }
                    }).catch(() => {});
                } else {
                    return false;
                }
            });
        };
        // 图片识别
        const func_ocr_handle_click = () => {
            searchVerifyLoading.value = true;
            // 表单校验
            ocrProductFormRef.value.validate((valid) => {
                if (valid) {
                    cutPicQuery.verifyPic = ocrProductForm.verifyPic
                    verifyPicData(cutPicQuery).then((res) => {
                        if(res.code != 200) {
                            if(res.type == 0) {
                                ElMessage.warning(res.msg);
                            } else {
                                ElMessage.error(res.msg);
                            }
                        } else {
                            ElMessage.success("识别完成！");
                            ocrProductForm.dirtyContent = res.data
                            searchVerifyLoading.value = false;
                        }
                    }).catch(() => {});
                } else {
                    return false;
                }
            });
        };
        const func_split_handle_click = () => {
            let tmpStr = ocrProductForm.dirtyContent;
            let tmpTable = tmpStr.split(ocrProductForm.splitStr);
            let tmp2 = []
            for (let index = 0; index < tmpTable.length; index++) {
                let element = tmpTable[index];
                element = element + " "+ ocrProductForm.splitStr;
                // console.log(element);
                tmp2.push({"ocrData": element});
            }
            tableData.value = tmp2;
            console.log(tableData);
        };

        const handleSelectionChange = (val) => {
            multipleSelection.value = val
        };
        // 提交
        const func_submit_handle_click = () => {
            // 表单校验
            let valid = true;
            if (valid) {
                cutPicQuery.folderpath = ocrProductForm.folderpath
                cutPicQuery.filepath = ocrProductForm.filepath
                cutOcrPicData(cutPicQuery).then((res) => {
                    if(res.code != 200) {
                        if(res.type == 0) {
                            ElMessage.warning(res.msg);
                        } else {
                            ElMessage.error(res.msg);
                        }
                    } else {
                        ElMessage.success("提交成功！");
                        ocrProductForm.folderpath = res.data.folderpath
                        ocrProductForm.filepath = res.data.filepath
                        ocrProductForm.verifyPic = res.data.verifyPic
                    }
                }).catch(() => {});
            } else {
                return false;
            }
        };
        const func_handleDelete = (index) => {
            let delRow = tableData.value[index];
            if (delRow.ocrData == "") {
                tableData.value.splice(index, 1);
                ElMessage.success("删除成功");
            } else {
                // 二次确认删除
                ElMessageBox.confirm("确定要删除吗？", "提示", {
                type: "warning",
                }).then(() => {
                    ElMessage.success("删除成功");
                    tableData.value.splice(index, 1);
                }).catch(() => {});
            }
        }
        const func_handleInsert = (index) => {
            let insertIndex= index +1;
            let obj ={
                "ocrData" : ""
            }
            tableData.value.splice(insertIndex,0,obj);
            // tableData.value.push(obj)
        };
        // 重置
        const onReset = () => {
            ocrProductFormRef.value.resetFields();
        };
        return {
            imgUrl, rules, formLabelWidth, tabPosition, activeStep, activeTabName, searchVerifyLoading, boardOptions,
            ocrProductForm, ocrProductFormRef,cutPicQuery, tableData, editTable, editTableData,
            checkFile,checkFileSure, checkVerifyFile,
            func_choose_handle_click, func_cut_handle_click, func_ocr_handle_click, func_submit_handle_click, onReset,
            func_split_handle_click, func_next_handle_click, func_tab_handleClick, handleSelectionChange, 
            func_handleDelete, func_handleInsert
        };
    },
};
</script>
<style scoped>
.demo-image__lazy {
  height: 400px;
  overflow-y: auto;
}
.demo-image__lazy .el-image {
  display: block;
  min-height: 200px;
  margin-bottom: 10px;
}
.demo-image__lazy .el-image:last-child {
  margin-bottom: 0;
}
</style>